<template>
    <div class="app-container">
        <el-form label-width="120px">
            <el-form-item label="信息描述">
                <el-tag type="info">excel模板说明</el-tag>
                <el-tag>
                    <i class="el-icon-download"></i>
                    <a
                        :href="`${OSS_PATH}/%E8%AF%BE%E7%A8%8B%E5%88%86%E7%B1%BB%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx`">点击下载模板</a>
                </el-tag>
            </el-form-item>
            <el-form-item label="上传文件">
                <el-upload class="upload-demo" ref="upload" :action="`${BASE_URL}/file/import`"
                    :on-preview="handlePreview" :on-remove="handleRemove" :auto-upload="false"
                    :on-success="fileUploadSuccess" :limit="1"
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                    <el-button size="small" type="primary" slot="trigger">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
                    </el-button>
                </el-upload>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            OSS_PATH: process.env.OSS_PATH, //获取dev配置文件中的oss地址
            BASE_URL: process.env.BASE_API,
        };
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        //   上传成功后的回调函数
        fileUploadSuccess(response, file, fileList) {
            console.log(response);
            if (response.succeeded) {
                this.$message({
                    type: "success",
                    message: "上传成功!",
                });
            }else{
                this.$message({
                    type: "error",
                    message: "上传失败!",
                });
            }
        }
    }
};
</script>